<template>
  <div class="wrapper" ref="wrap">
    <ul>
      <router-link tag="li" :to="'/headlinedetails/' + item.id"  v-for="item of list" :key="item.id">
        <!--  模块一 -->
        <div class="itemA border-bottom">
          <p class="itemA-title">{{item.title}}</p>
          <div class="itemA-img">
            <div class="img-wrapper" v-for="itemimg of item.imgUrl">
              <img class="img" :src="itemimg.img">
            </div>
          </div>
          <div class="time">
            <span>{{item.figure}}</span>&nbsp
            <span>{{item.time}}</span>&nbsp
            <span>{{item.reading}}</span>
          </div>
        </div>
      </router-link>
      <!--  模块2 -->
      <!-- <li  v-for="item of list" :key="item.id" v-else="item.imgUrl.length === '1'" >
         &lt;!&ndash;  模块二 &ndash;&gt;
         <div class="itemB border-bottom">
           <div class="itemB-left">
             <div class="itemB-left-text">{{item.title}}</div>
             <p class="itemB-time">
               <span>{{item.text}}</span>
               <span>{{item.time}}</span>
             </p>
           </div>
           <div class="itemB-right" v-for="itemimg of item.imgUrl">
             <img :src="itemimg.imgUrl">
           </div>
         </div>
       </li>-->
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'LinesList',
    props:{
      list: Array
    },
    data () {
      return{

      }
    },
    //  方法
    methods: {
        /*show(){
          if (this.item.imgUrl.length !== 3){

          }
        }*/
    },
    mounted () {
      // 使用 better-scroll 页面滑动插件
      this.scroll  = new BScroll(this.$refs.wrap)
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"

  .wrapper
    wrapper()
    overflow hidden
    position absolute
    top 1.8rem
    left 0
    right 0
    bottom 0

  .title
    title()

  .itemA
    width 100%
    padding .3rem 0

  .itemA-title
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    line-height .8rem
    color #2f3c4d

    font-weight bold
    font-size .3rem


  .itemA-img
    display flex
    flex-direction row
    justify-content space-between
    align-items center
    margin-bottom .2rem

  .img-wrapper
    width 32%
    height 1.8rem
    overflow hidden

  .img
    img()

  .time, .itemB-time
    information()

  .itemB
    item()

  .itemB-left
    width 4rem
    height 2rem
    display flex
    flex-direction column
    justify-content space-around
    padding-right .8rem

  .itemB-left-text
    overflowEllipsis2()

  .itemB-right
    width 2.3rem
    height 2rem
    overflow hidden

  .itemB-right img
    img()

  .item-more
    button()
</style>
